<template>
    <el-container style="height: 100%">
        <el-aside width="auto" style="height: 100%">
            <el-menu
                :default-active="$route.path"
                router
                class="el-menu-vertical-demo"
                :collapse="isCollapse"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
            >
                <el-menu-item index="/home">
                    <i class="el-icon-s-home"></i>
                    <span slot="title">首页</span>
                </el-menu-item>

                <el-submenu index="/deviceList" v-if="role === 'EDP'">
                    <template slot="title">
                        <i class="el-icon-monitor"></i>
                        <span slot="title">设备管理</span>
                    </template>
                    <el-menu-item index="/deviceList">设备查询</el-menu-item>
                    <el-menu-item index="/device">新增设备</el-menu-item>
                </el-submenu>

                <el-submenu index="/content" v-if="role === 'EDP'">
                    <template slot="title">
                        <i class="el-icon-document"></i>
                        <span slot="title">交接管理</span>
                    </template>
                    <el-menu-item index="/handover">交接查询</el-menu-item>
                    <el-menu-item index="/content">写交接</el-menu-item>
                    <el-menu-item index="/handoverExport">交接导出</el-menu-item>
                </el-submenu>

                <el-submenu index="/part" v-if="role === 'EDP'">
                    <template slot="title">
                        <i class="el-icon-s-tools"></i>
                        <span slot="title">配件管理</span>
                    </template>
                    <el-menu-item index="/partStoreList">配件库存</el-menu-item>
                    <el-menu-item index="/partPurchase">配件入库</el-menu-item>
                    <el-menu-item index="/partPurchaseList">配件入库记录</el-menu-item>
                </el-submenu>

                <el-submenu index="/counter" v-if="role === 'AD' || role === 'EDP'">
                    <template slot="title">
                        <i class="el-icon-receiving"></i>
                        <span slot="title">专柜磅秤管理</span>
                    </template>
                    <el-menu-item index="/counterList">查询</el-menu-item>
                    <el-menu-item index="/counter" v-if="role === 'AD'">新专柜入场</el-menu-item>
                </el-submenu>

                <!-- <el-menu-item index="/propose">
                    <i class="el-icon-chat-line-square"></i>
                    <span slot="title">意见反馈</span>
                </el-menu-item>-->
            </el-menu>
        </el-aside>
        <el-container>
            <el-header>
                <el-tooltip class="item" effect="dark" :content="isCollapse ? '展开' : '折叠'" placement="left">
                    <i
                        :class="{ 'el-icon-d-arrow-left': !isCollapse, 'el-icon-d-arrow-right': isCollapse }"
                        @click="() => (isCollapse = !isCollapse)"
                        style="float: left; line-height: 60px; margin-right: 20px"
                    ></i>
                </el-tooltip>
                <el-breadcrumb separator-class="el-icon-arrow-right" style="float: left; line-height: 60px">
                    <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item v-if="routeTitle">{{ routeTitle }}</el-breadcrumb-item>
                </el-breadcrumb>
                <el-dropdown @command="handleCommand" style="float: right; line-height: 60px">
                    <span class="el-dropdown-link" style="line-height: 60px">
                        <el-avatar size="small" style="vertical-align:middle">{{ name.slice(-1) }}</el-avatar>
                        {{ store }} - {{ name }}
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="changeInf">个人设置</el-dropdown-item>
                        <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
                        <el-dropdown-item command="changeStore" v-if="role === 'EDP'">分店设置</el-dropdown-item>
                        <el-dropdown-item command="logout" divided>退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <el-main class="content">
                <transition name="el-fade-in">
                    <router-view :key="key" />
                </transition>

                <el-dialog title="密码修改" :visible.sync="changePasswordFormVisible" :close-on-click-modal="false">
                    <el-form :model="changePasswordForm" ref="changePasswordForm" label-width="100px">
                        <el-form-item
                            label="原密码"
                            prop="oldPassword"
                            :rules="[
                                { required: true, message: '请输入原密码', trigger: 'blur' },
                                { min: 5, max: 20, message: '密码长度为 5 到 20 个字符', trigger: 'blur' }
                            ]"
                        >
                            <el-input v-model="changePasswordForm.oldPassword" show-password></el-input>
                        </el-form-item>
                        <el-form-item
                            label="新密码"
                            prop="newPassword"
                            :rules="[
                                { required: true, message: '请输入新密码', trigger: 'blur' },
                                { min: 5, max: 20, message: '密码长度为 5 到 20 个字符', trigger: 'blur' }
                            ]"
                        >
                            <el-input v-model="changePasswordForm.newPassword" show-password></el-input>
                        </el-form-item>
                        <el-form-item
                            label="确认新密码"
                            prop="confirmPassword"
                            :rules="[
                                { required: true, message: '请输入确认新密码', trigger: 'blur' },
                                { min: 5, max: 20, message: '密码长度为 5 到 20 个字符', trigger: 'blur' },
                                {
                                    validator: (rule, value, callback) => {
                                        if (value === '') {
                                            callback(new Error('请输入确认新密码'))
                                        } else if (value !== changePasswordForm.newPassword) {
                                            callback(new Error('2次密码输入不一致'))
                                        } else {
                                            callback()
                                        }
                                    },
                                    trigger: 'blur'
                                }
                            ]"
                        >
                            <el-input v-model="changePasswordForm.confirmPassword" show-password></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="() => (changePasswordFormVisible = false)">取 消</el-button>
                        <el-button type="primary" @click="changePassword">确 定</el-button>
                    </div>
                </el-dialog>

                <el-dialog title="个人设置" :visible.sync="changeInfFormVisible" :close-on-click-modal="false">
                    <el-form :model="changeInfForm" ref="changeInfForm" label-width="100px">
                        <el-form-item
                            label="姓名"
                            prop="name"
                            :rules="[
                                { required: true, message: '请输入名字', trigger: 'blur' },
                                { min: 2, max: 10, message: '名字长度在 2 到 10 个字符', trigger: 'blur' }
                            ]"
                        >
                            <el-input v-model="changeInfForm.name" placeholder="请输入姓名" clearable></el-input>
                        </el-form-item>
                        <el-form-item
                            label="手机号"
                            prop="tel"
                            :rules="[
                                { type: 'integer', message: '手机号必须为数字', trigger: 'blur' },
                                { pattern: /^1\d{10}$/, message: '手机号必须为11位数字', trigger: 'blur' }
                            ]"
                        >
                            <el-input v-model.number="changeInfForm.tel" auto-complete="off" placeholder="请输入手机号" clearable></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="() => (changeInfFormVisible = false)">取 消</el-button>
                        <el-button type="primary" @click="changeInf">确 定</el-button>
                    </div>
                </el-dialog>

                <el-dialog title="修改分店信息" :visible.sync="changeStoreFormVisible" :close-on-click-modal="false">
                    <el-form :model="changeStoreForm" ref="changeStoreForm" label-width="100px">
                        <el-form-item label="店名" prop="name" :rules="{ required: true, message: '请输入店名', trigger: 'blur' }">
                            <el-input v-model="changeStoreForm.name" placeholder="请输入店名" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="地址" prop="address">
                            <el-input v-model="changeStoreForm.address" placeholder="请输入地址" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="开店时间" prop="start_business">
                            <el-date-picker
                                type="date"
                                v-model="changeStoreForm.start_business"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择开店时间"
                            ></el-date-picker>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="() => (changeStoreFormVisible = false)">取 消</el-button>
                        <el-button type="primary" @click="changeStore">确 定</el-button>
                    </div>
                </el-dialog>
            </el-main>
            <Footer></Footer>
            <el-backtop target=".content"></el-backtop>
        </el-container>
    </el-container>
</template>

<script>
import Footer from '../components/Footer'

export default {
    data() {
        return {
            isCollapse: false,
            routeTitle: null,
            changePasswordFormVisible: false,
            changePasswordForm: {
                oldPassword: '',
                newPassword: '',
                confirmPassword: '',
            },
            changeInfFormVisible: false,
            changeInfForm: {
                name: '',
                tel: null,
            },
            changeStoreFormVisible: false,
            changeStoreForm: {
                name: '',
                address: '',
                start_business: null,
            },
        }
    },
    computed: {
        store() {
            return this.$store.getters.user.store
        },
        name() {
            return this.$store.getters.user.name
        },
        role() {
            return this.$store.getters.user.role
        },
        key() {
            // 只要保证 key 唯一性就可以了，保证不同页面的 key 不相同
            return this.$route.fullPath
        },
    },
    components: {
        Footer,
    },
    methods: {
        async handleCommand(command) {
            if (command === 'logout') {
                const response = await this.$http.get('/logout')
                if (response && response.code === 0) {
                    await this.$store.dispatch('logout')
                    this.$message.success('退出成功')
                    this.$router.push({ name: 'login' })
                }
            } else if (command === 'changePassword') {
                this.changePasswordFormVisible = true
                this.$refs.changeStoreForm.clearValidate()
            } else if (command === 'changeInf') {
                const response = await this.$http.get('/user')
                if (response && response.code === 0) {
                    Object.assign(this.changeInfForm, response.returnObject)
                    this.changeInfFormVisible = true
                    this.$refs.changeStoreForm.clearValidate()
                }
            } else if (command === 'changeStore') {
                const response = await this.$http.get('/store')
                if (response.code === 0) {
                    Object.assign(this.changeStoreForm, response.returnObject)
                    this.changeStoreFormVisible = true
                    this.$refs.changeStoreForm.clearValidate()
                }
            }
        },
        changePassword() {
            this.$refs.changePasswordForm.validate(async (valid) => {
                if (!valid) return false
                const response = await this.$http.patch('/password', this.changePasswordForm)
                if (response && response.code === 0) {
                    this.$store.dispatch('logout').then(() => {
                        this.$message.success('密码修改成功，请重新登录')
                        this.$router.push({ name: 'login' })
                    })
                }
            })
        },
        changeInf() {
            this.$refs.changeInfForm.validate(async (valid) => {
                if (!valid) return false
                const response = await this.$http.put('/user', this.changeInfForm)
                if (response && response.code === 0) {
                    this.$store.dispatch('updateName', this.changeInfForm.name).then(() => {
                        this.changeInfFormVisible = false
                        this.$message.success('个人信息修改成功')
                    })
                }
            })
        },
        changeStore() {
            this.$refs.changeStoreForm.validate(async (valid) => {
                if (!valid) return false
                const response = await this.$http.put('/store', this.changeStoreForm)
                if (response && response.code === 0) {
                    this.$store.dispatch('updateStore', this.changeStoreForm.name).then(() => {
                        this.changeStoreFormVisible = false
                        this.$message.success('分店信息修改成功')
                    })
                }
            })
        },
    },
    watch: {
        $route(to, from) {
            this.routeTitle = to.name === 'home' ? null : to.meta.title
        },
    },
}
</script>

<style scoped>
.el-aside {
    background-color: #545c64;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: 100vh;
}

.el-dropdown-menu {
    margin: -15px 0 0;
}
.el-header {
    border-bottom: 1px solid #ebeef5;
}
</style>
